<template>
  <view class="orderDetail">
    <view class="box">
      <detailItem title="订单商品" :state="state" :list="goods"></detailItem>
    </view>
    <view class="box">
      <detailCollapse title="金额信息" :list="price"></detailCollapse>
    </view>
    <view class="box">
      <detailCollapse title="订单信息" :list="orderList"></detailCollapse>
    </view>
    <detailLog @click="handleClick"></detailLog>
    <u-gap height="80" bgColor="#F9F9F9"></u-gap>
    <detailFoot
      v-if="btnList.length > 0"
      :list="btnList"
      @click="footBtnFn"
    ></detailFoot>
  </view>
</template>

<!-- 订货单列表详情 -->
<script setup>
import { orderOrderDetail, getOneMoreOrder } from "@/api/order";
import detailCollapse from "@/components/orderDetail/detailCollapse.vue";
import detailItem from "@/components/orderDetail/detailItem.vue";
import detailLog from "@/components/orderDetail/detailLog.vue";
import detailFoot from "@/components/orderDetail/detailFoot.vue";
import { onLoad } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
import { message } from "@/hooks/useToast";
import { useDetailStore } from "@/store/detail";
const btnList = computed(() => {
  return [
    // {
    //   name: "导出",
    //   value: "download",
    //   plain: true,
    //   isShow: () => true,
    // },
    {
      name: "支付",
      value: "pay",
      isShow: () => priceDetail.value.paymentState !== 1,
    },
    {
      name: "再来一单",
      value: "again",
      isShow: () => true,
    },
  ].filter((btn) => btn.isShow());
});
const goods = computed(() => {
  return goodsDetail.value.map((btn) => {
    return {
      name: btn.goodsName,
      image: btn.goodsImage,
      des: btn.barCode,
      infoList: [
        {
          value: `￥${btn.unitPrice}/${btn.unitName}x${btn.preNum}`,
          tag: "order",
        },
        {
          name: "预订金额：",
          value: `¥${uni.$u.priceFormat(btn.preAmount, 2)}`,
        },
        {
          name: "备注：",
          value: btn.remark,
        },
      ],
    };
  });
});
const price = computed(() => {
  return [
    {
      name: "金额合计",
      value: uni.$u.priceFormat(priceDetail.value.orderAmount, 2),
    },
    {
      name: "折扣",
      value: priceDetail.value.discount ? priceDetail.value.discount : 100,
    },
    {
      name: "折后金额",
      value: priceDetail.value.discount
        ? uni.$u.priceFormat(
            priceDetail.value.orderAmount * (priceDetail.value.discount / 100),
            2
          )
        : uni.$u.priceFormat(priceDetail.value.orderAmount, 2),
    },
    {
      name: "运费",
      value: priceDetail.value.deliveryFee || "0.00",
    },
    // {
    // 	name: "优惠券折扣",
    // 	value: priceDetail.value.minusAmount,
    // },
    {
      name: "订单订货金额",
      value: uni.$u.priceFormat(priceDetail.value.orderAmount, 2),
      border: true,
      custom: {
        paddingBottom: "11px",
      },
    },
    // {
    // 	name: "订单结算金额",
    // 	value: uni.$u.priceFormat(priceDetail.value.receivableAmount, 2),
    // 	valueColor: "#FD4D00",
    // 	custom: {
    // 		lineHeight: "40px",
    // 	},
    // },
  ];
});
const orderList = computed(() => {
  // const files = priceDetail.value.cwmsInvStockinImageDTOList || [];
  // const img = files.length !== 0 ? files[0].imageUrl : "";
  return [
    {
      name: "仓库",
      value: priceDetail.value.workhouseName,
    },
    {
      name: "订单单号",
      value: priceDetail.value.orderCode,
      valueColor: "#FD4D00",
    },
    {
      name: "送货日期",
      value: uni.$u.timeFormat(priceDetail.deliveryDateTime, "yyyy-mm-dd"),
    },
    {
      name: "备注",
      value: priceDetail.value.remark,
    },
    // {
    //   name: "附件",
    //   type: "image",
    //   value:
    //     "https://hylmall.oss-us-west-1.aliyuncs.com/hyl_image/20210228201034c05f33698.png",
    // },
  ];
});
const id = ref("");
const detail = ref({});
const goodsDetail = computed(() => {
  return detail.value.respOmsOrderBillInfoDTOList || [];
});
const state = computed(() => {
  return priceDetail.value.paymentStateStr;
});
const priceDetail = computed(() => {
  return detail.value.respOmsOrderBillDTO || {};
});
onLoad((params) => {
  if (params.id) {
    id.value = params.id;
    getDetail();
  }
});
const getDetail = async () => {
  const res = await orderOrderDetail({
    id: id.value,
  });
  detail.value = res;
};
const detailStore = useDetailStore();
const handleClick = () => {
  detailStore.setLogList(detail.value.respOmsOrderBillLogDTOList);
  uni.navigateTo({
    url: "/pages/orderList/detailLog",
  });
};
const getOneMoreOrderFn = async () => {
  await getOneMoreOrder({
    orderCode: priceDetail.value.orderCode,
  });
  message("操作成功");
  setTimeout(() => {
    uni.navigateBack();
  }, 1000);
};
const footBtnFn = (name) => {
  const fns = {
    download: () => {},
    pay: () => {},
    again: getOneMoreOrderFn,
  };
  fns[name]();
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
  padding-top: 13px;
}

.box {
  margin-bottom: 10px;
}
</style>
